<template>
  <div class="com-nav">
    <Menu mode="horizontal" theme="dark" active-name="2" @on-select="select" style="flex:1">
      <MenuItem name="/phone"> 手机
      </MenuItem>
      <MenuItem name="/clothes"> 服饰
      </MenuItem>
      <MenuItem name="3"> 生鲜
      </MenuItem>
      <MenuItem name="/book"> 图书
      </MenuItem>
    </Menu>
    <Badge :count="count" :offset="[20,0]">
      <div class="cart" @click="onJump">
        <span>购物车</span>
        <Icon type="md-cart" style="font-size:22px;"></Icon>
      </div>
    </Badge>

    <div class="name">
      <Dropdown trigger="click" style="cursor:pointer" @on-click="onClick">
        {{username}}
        <Icon type="ios-arrow-down"></Icon>
        <Dropdown-menu slot="list">
          <Dropdown-item name="rersonal">个人设置</Dropdown-item>
          <Dropdown-item name="logout">退出</Dropdown-item>
        </Dropdown-menu>
      </Dropdown>
    </div>
  </div>
</template>

<script>
import service from "@/service";
import { mapState, mapActions } from "vuex";
export default {
  name: "Nav",
  data() {
    return {
      theme: "",
      name: "222333"
    };
  },
  computed: {
    ...mapState({
      username: state => {
        return state.home.userName;
      },
      count: state => {
        return state.cart.products.length;
      }
    })
  },
  methods: {
    ...mapActions(["getUserName"]),
    select(name) {
      console.log(name);
      this.$router.push({ path: name });
    },
    onClick(name) {
      console.log(name);
      service.post("/v1/logout").then(res => {
        if (res.retcode === 1) {
          this.$router.push({ name: "Login" });
        }
      });
    },
    onJump() {
      this.$router.push({ path: "/cart" });
    }
  },
  created() {
    this.getUserName();
    // service.get("/v1/getUser").then(res => {
    //   this.name = res.userName;
    // });
  }
};
</script>
<style lang="scss">
.com-nav {
  .ivu-menu-item-active {
    background: #000;
  }
}
</style>
<style lang="scss" scoped>
.com-nav {
  display: flex;
  .name {
    width: 120px;
    background: #515a6e;
    color: #fff;
    line-height: 60px;
  }
  .cart {
    background: #515a6e;
    color: #9cf;
    height: 60px;
    line-height: 60px;
    font-size: 14px;
    cursor: pointer;
  }
}
</style>
